<template>
    <div class="app-list-step">
        <!-- 构建历史步骤条 -->
       
       	<div class="clearfix">
       		<div class="fl">
		        	<el-steps
		        		 direction="vertical" 
		        		 :active="1" 
		        		 :space="74" 
		        		 style="margin:15px 0 0 20px ;width: 160px;" >
		            <el-step :title="item.title" 
		            	v-for="item in stepsList"
		        		 :key="item.index"
		            	 ></el-step>
		        	</el-steps>
	        </div>
	        <div class="fl">
	        		<el-card 
			        	style="margin:20px 0;width: 500px;" 
			        	v-for="item in stepsList" 
			        	:key="item.index" 
			        	shadow="never">
			        	<el-row>
			        		<el-col :span="16">
			        			{{item.desc}}
			        		</el-col>
			        		<el-col :span="8" align="right">
			        			<el-button class="step_btn" type="primary" @click="handleLookDetail(item.id)">查看详情</el-button>
			        		</el-col>
			        	</el-row>
			        </el-card>
	        </div>
       	</div>

        <log-dialog ref="logdialog"  @cancle="cancle" ></log-dialog>
        
    </div>
</template>

<script>
import logDialog from "@/view/components/dialog/logDialog.vue";
import {searchLogByInstIdPage} from '@/service/swagger/LogController.js'

import {getWorkUnitById} from'@/service/swagger/AcWorkInstController'

export default{
    components:{
      logDialog,
    },
    props:[
      //"stepsList",
      "id"
    ],
    data(){
        return{
           stepsList:[],
        }
    },
    mounted(){
    	// this.getData();
    },
    methods:{
    		getData(){
    			if(!this.id){
    				return ;
    			}
    			getWorkUnitById({
    				id : this.id,
    			}).then(ret=>{
    				if(!ret.code&&ret.data){
    					let arr = [];
    					ret.data.forEach(el=>{
    						arr.push({
    							title : el.createTime,
    							desc : el.workNameDesc,
    							id : el.instId,
    						})
    					})
    					this.stepsList = arr
    				}
    			})
    			
    		},
        handleLookDetail(id){
					this.$refs.logdialog.open(id);
        },
        cancle(){
            this.$refs.logdialog.close();
        }
    }
}
</script>



<style lang="scss">
	@import "../../../styles/variables.scss";
	
.app-list-step{
	.el-steps--vertical{
		background: none;
		.el-step__title {
			padding: 0;
			font-size: $fontMiddle;
			font-weight: normal;
			color: $fontDeepGrey;
			line-height: 24px;
		}
		.el-step__line {
			top: 7px;
			bottom: -7px;
		}
		.el-step__icon.is-text {
			margin: 7px 0 0 7px;
			width: 10px;
			height: 10px;
			vertical-align: top;
			background: $green;
			border: 0;
			
			.el-step__icon-inner {
				font-size: 0;
			}
		}
	}
	
	.el-card__body {
		padding: 10px 20px;
	}
}
</style>

